<template>
  <div class="main">
    <div class="header">
      <el-page-header content="导出图谱文件" title="返回" @back="goBack" />
    </div>
    <div class="indicate">
      <h1>当前导出：</h1>
    </div>
    <div class="export">
      <div v-if="current_show" class="current_export">
        <h1>{{ export_state }}</h1>
        <h1>导出内容：{{ search_content }}</h1>
        <h1>包含节点数目： {{ search_length }}</h1>
        <h1>导出时间：{{ export_date }}</h1>
      </div>
      <div v-if="!current_show" class="current_export_over">
        <h1>当前无导出</h1>
      </div>
    </div>
    <div class="indicate">
      <div>
        <h1>导出历史：</h1>
        <h1>条目:{{ history_items }}</h1>
        <el-button type="danger" plain @click="dialogVisible = true"
          >删除所有条目！！</el-button
        >
      </div>
    </div>
    <div class="export bottom">
      <ul class="infinite-list">
        <li
          v-for="(item, i) in export_list"
          :key="i"
          class="infinite-list-item"
        >
          <h1>{{ i + 1 }}</h1>
          <h1>导出内容：{{ item.search_content }}</h1>
          <h1>包含节点数目：{{ item.search_length }}</h1>
          <h1>导出时间：{{ item.export_date }}</h1>
          <el-button
            type="warning"
            @click="
              export_file(
                item.search_content,
                item.search_length,
                item.appearance
              )
            "
          >
            导出
          </el-button>
        </li>
      </ul>
      <h1
        v-if="!is_have_history_items"
        style="color: #808080; width: max-content; margin: 0px auto 13px auto"
      >
        还没有导出历史！
      </h1>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="消息确认" width="30%">
    <span style="font-size: 17px">确定删除所有导出记录吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="del_all_history()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
export default {
  setup() {
    let export_state = ref("正在导出...");
    let current_show = ref(false);
    let dialogVisible = ref(false);
    let export_list = reactive([]);
    let is_have_history_items = ref(false);
    let history_items = ref(0);
    const router = useRouter();
    const route = useRoute();
    function replaceWithQuery() {
      router.back(-1);
    }
    const { proxy } = getCurrentInstance();

    let search_content = ref("");
    let search_length = ref(0);
    let appearance = ref(0);
    let export_date = ref("");

    let get = () => {
      // console.log("export  //........");
      var temp_list = proxy.$store.getters.getexport_list;
      temp_list[0].forEach((item) => {
        export_list.unshift(item);
      });
      var body = route.params.body;
      if (body) {
        current_show.value = JSON.parse(body)["current_show"];
        if (current_show.value) {
          search_content.value = JSON.parse(body)["search_content"];
          // if (search_content.value == "") {
          //   proxy.$router.replace({
          //     name: "Home",
          //   });
          // }
          search_length.value = JSON.parse(body)["search_length"];
          appearance.value = JSON.parse(body)["appearance"];

          export_file(
            search_content.value,
            search_length.value,
            appearance.value
          );

          export_date.value = current_time();
          // console.log("export list", export_list);
        }
      } else {
        search_content.value = temp_list[1]["search_content"];
        search_length.value = temp_list[1]["search_length"];
        appearance.value = temp_list[1]["appearance"];
        export_date.value = temp_list[1]["export_date"];
      }
      // console.log("get", export_list);
      save();
      history_items.value = export_list.length;
      is_have_history_items.value = history_items.value >0;
    };

    function current_time() {
      var date = new Date();
      return `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    }

    onMounted(get);

    let save = () => {
      var current = {
        search_content: search_content.value,
        search_length: search_length.value,
        appearance: appearance.value,
        export_date: export_date.value,
      };
      if (search_content.value && search_content.value.toString().length > 0) {
        export_list.unshift(current);
      }
      // console.log("onUnmounted", export_list);
      proxy.$store.commit("setexport_list", [export_list, current]);
    };
    // onUnmounted(save);

    function download(data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute(
        "download",
        `${export_date.value}-${search_length.value}-${search_content.value}.json`
      );
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      ElMessage({
        message: "请稍等，数据正在准备中 马上开始下载！",
        type: "success",
        offset: 30,
      });
      export_state.value = "请查看下载！";
    }

    function export_file(search_content_t, search_length_t, appearance_t) {
      current_show.value = true;
      search_content.value = search_content_t;
      search_length.value = search_length_t;
      appearance.value = appearance_t;
      export_date.value = current_time();
      var ROOT_PATH = "/api/downloadFile";
      proxy.$axios
        .post(
          ROOT_PATH,
          {
            search_content: search_content_t,
            search_length: search_length_t,
            appearance: appearance_t,
          },
          { responseType: "blob" }
        )
        .then((response) => {
          // console.log("download", response);
          download(response.data);
        });
    }
    function del_all_history() {
      // console.log("dialog close confirm");
      dialogVisible.value = false;
      export_list.length = 0;
      proxy.$store.commit("removeExportList");
      history_items.value = 0;
      is_have_history_items.value = false;
    }
    const goBack = () => {
      // console.log("go back");
      replaceWithQuery();
    };
    return {
      goBack,
      export_list,
      export_file,

      search_content,
      search_length,
      appearance,
      export_date,

      export_state,
      current_show,
      is_have_history_items,
      dialogVisible,
      history_items,

      del_all_history,
    };
  },
};
</script>

<style scoped>
.main {
  box-sizing: border-box;
  width: 100vw;
  display: flex;
  flex-direction: column;
  height: fit-content;
  overflow-x: hidden;
  overflow-y: auto;
}
h1 {
  font-size: 17px;
  font-weight: 550;
}
.header {
  width: 100%;
  padding: 17px 10px 38px 10px;
  box-sizing: border-box;
  height: 50px;
  background-color: rgba(241, 241, 241, 0.79);
}
.indicate {
  margin-top: 3vh;
  margin-bottom: 2vh;
  padding: 7px;
  box-sizing: border-box;
  width: 70%;
  color: #4e4e4e;
  border-left: 2px solid rgba(33, 33, 33, 0.6);
  align-self: center;
  overflow: hidden;
}
.indicate h1 {
  font-size: 19px;
}
.indicate div {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(70, 70, 70);
  padding-right: 3vw;
}
.export {
  box-sizing: border-box;
  width: 70vw;
  align-self: center;
  overflow: hidden;
  box-shadow: 8px 10px 20px #f1f1f1;
  border: 1px solid rgba(234, 234, 234, 0.6);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.bottom {
  margin-bottom: 6vh;
}
.current_export {
  margin: 13px auto 13px auto;
  box-sizing: border-box;
  width: 97%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  background: rgba(0, 255, 102, 0.148);
  border: 1px solid rgb(249, 249, 249);
  border-radius: 17px;
  color: rgb(70, 70, 70);
  padding-left: 25px;
  padding-right: 25px;
}
.current_export_over {
  margin: 13px auto 13px auto;
  box-sizing: border-box;
  width: 97%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: rgba(0, 255, 0, 0.025);
  border: 1px solid rgb(215, 215, 215);
  border-radius: 17px;
  color: rgb(70, 70, 70);
  padding-left: 25px;
  padding-right: 25px;
}
.current_export_over h1 {
  width: max-content;
  font-size: 23px;
}

.infinite-list {
  margin: 13px auto 13px auto;
  height: 100%;
  box-sizing: border-box;
  width: 97%;
  list-style: none;
}
.infinite-list :first-child {
  background: rgba(0, 255, 102, 0.148);
}

.infinite-list-item {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  height: 65px;
  background: rgb(246, 246, 246);
  border: 1px solid rgb(243, 243, 243);
  border-radius: 17px;
  color: rgb(70, 70, 70);
  padding-left: 25px;
  padding-right: 25px;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
